<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>穗凡的本地图库</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        header {
            background-color: #333;
            color: #fff;
            padding: 20px 0;
            text-align: center;
        }
        .search-bar {
            text-align: center;
            margin: 20px 0;
        }
        .search-bar input {
            padding: 10px;
            width: 300px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .search-bar button {
            padding: 10px 20px;
            border: none;
            background-color: #333;
            color: #fff;
            border-radius: 5px;
            cursor: pointer;
        }
        .search-bar button:hover {
            background-color: #555;
        }
        .categories {
            text-align: center;
            margin: 20px 0;
        }
        .categories button {
            padding: 10px 20px;
            margin: 5px;
            border: none;
            background-color: #333;
            color: #fff;
            border-radius: 5px;
            cursor: pointer;
        }
        .categories button:hover {
            background-color: #555;
        }
        .gallery {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            padding: 20px;
        }
        .gallery .card {
            margin: 10px;
            border: 2px solid #ccc;
            border-radius: 10px;
            background-color: #fff;
            width: 300px;
            overflow: hidden;
            transition: transform 0.2s;
        }
        .gallery .card:hover {
            transform: scale(1.05);
            border-color: #333;
        }
        .gallery .card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        .gallery .card .info {
            padding: 10px;
        }
        .gallery .card .info p {
            margin: 5px 0;
            font-size: 14px;
            color: #333;
        }
        .gallery .card .info button {
            padding: 5px 10px;
            margin: 5px 2px;
            border: none;
            background-color: #333;
            color: #fff;
            border-radius: 5px;
            cursor: pointer;
        }
        .gallery .card .info button:hover {
            background-color: #555;
        }
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            justify-content: center;
            align-items: center;
        }
        .modal-content {
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            max-width: 80%;
            max-height: 80%;
            overflow: auto;
            text-align: center;
        }
        .modal-content img {
            max-width: 100%;
            max-height: 500px;
            border-radius: 5px;
        }
        .modal-content p {
            margin: 10px 0;
            font-size: 16px;
            color: #333;
        }
        .close {
            position: absolute;
            top: 20px;
            right: 20px;
            color: #fff;
            font-size: 30px;
            cursor: pointer;
        }
        .upload-section {
            text-align: center;
            margin: 20px 0;
        }
        .upload-section input {
            display: none;
        }
        .upload-section label {
            padding: 10px 20px;
            border: none;
            background-color: #333;
            color: #fff;
            border-radius: 5px;
            cursor: pointer;
        }
        .upload-section label:hover {
            background-color: #555;
        }
        .upload-section select {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <header>
        <h1>穗凡的本地图库</h1>
    </header>
    <div class="search-bar">
        <input type="text" id="searchInput" placeholder="搜索图片...">
        <button onclick="searchImages()">搜索</button>
    </div>
    <div class="categories">
        <button onclick="filterImages('all')">全部</button>
        <button onclick="filterImages('nature')">自然</button>
        <button onclick="filterImages('city')">城市</button>
        <button onclick="filterImages('animals')">动物</button>
    </div>
    <div class="upload-section">
        <label for="fileInput">上传图片</label>
        <input type="file" id="fileInput" accept="image/*" onchange="handleUpload()">
        <select id="categorySelect">
            <option value="nature">自然</option>
            <option value="city">城市</option>
            <option value="animals">动物</option>
        </select>
    </div>
    <div class="gallery" id="gallery">
        <!-- 图片将通过JavaScript动态加载 -->
    </div>
    <div id="modal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal()">&times;</span>
            <img id="modalImage" src="" alt="大图">
            <p id="modalDescription"></p>
        </div>
    </div>
    <script>
        // 本地图片数据
        let images = [
            { src: "https://via.placeholder.com/300x200?text=自然1", description: "自然风景1", category: "nature", likes: 0, favorites: 0 },
            { src: "https://via.placeholder.com/300x200?text=城市1", description: "城市风光1", category: "city", likes: 0, favorites: 0 },
            { src: "https://via.placeholder.com/300x200?text=动物1", description: "可爱动物1", category: "animals", likes: 0, favorites: 0 },
            { src: "https://via.placeholder.com/300x200?text=自然2", description: "自然风景2", category: "nature", likes: 0, favorites: 0 },
            { src: "https://via.placeholder.com/300x200?text=城市2", description: "城市风光2", category: "city", likes: 0, favorites: 0 },
            { src: "https://via.placeholder.com/300x200?text=动物2", description: "可爱动物2", category: "animals", likes: 0, favorites: 0 }
        ];

        let currentCategory = 'all'; // 当前分类
        let currentSearch = ''; // 当前搜索词

        // 加载图片
        function loadImages() {
            const gallery = document.getElementById('gallery');
            gallery.innerHTML = '';
            const filteredImages = images.filter(img => {
                const matchesCategory = currentCategory === 'all' || img.category === currentCategory;
                const matchesSearch = img.description.toLowerCase().includes(currentSearch.toLowerCase());
                return matchesCategory && matchesSearch;
            });

            filteredImages.forEach(img => {
                const card = document.createElement('div');
                card.className = 'card';
                card.innerHTML = `
                    <img src="${img.src}" alt="${img.description}">
                    <div class="info">
                        <p>${img.description}</p>
                        <button onclick="likeImage('${img.src}')">点赞 (${img.likes})</button>
                        <button onclick="favoriteImage('${img.src}')">收藏 (${img.favorites})</button>
                    </div>
                `;
                card.querySelector('img').onclick = () => openModal(img.src, img.description);
                gallery.appendChild(card);
            });
        }

        // 搜索图片
        function searchImages() {
            currentSearch = document.getElementById('searchInput').value;
            loadImages();
        }

        // 过滤分类
        function filterImages(category) {
            currentCategory = category;
            loadImages();
        }

        // 点赞图片
        function likeImage(src) {
            const img = images.find(img => img.src === src);
            img.likes++;
            loadImages();
        }

        // 收藏图片
        function favoriteImage(src) {
            const img = images.find(img => img.src === src);
            img.favorites++;
            loadImages();
        }

        // 打开模态框
        function openModal(src, description) {
            const modal = document.getElementById('modal');
            const modalImage = document.getElementById('modalImage');
            const modalDescription = document.getElementById('modalDescription');
            modalImage.src = src;
            modalDescription.textContent = description;
            modal.style.display = 'flex';
        }

        // 关闭模态框
        function closeModal() {
            const modal = document.getElementById('modal');
            modal.style.display = 'none';
        }

        // 上传图片
        function handleUpload() {
            const fileInput = document.getElementById('fileInput');
            const file = fileInput.files[0];
            const categorySelect = document.getElementById('categorySelect');
            const selectedCategory = categorySelect.value; // 获取用户选择的分类

            if (file) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    const newImage = {
                        src: e.target.result,
                        description: '新上传的图片',
                        category: selectedCategory, // 使用用户选择的分类
                        likes: 0,
                        favorites: 0
                    };
                    images.push(newImage);
                    loadImages();
                };
                reader.readAsDataURL(file);
            }
        }

        // 初始加载图片
        loadImages();
    </script>
</body>
</html>